
import React from 'react';
import {Row, Col, Popover, Button, Modal, message} from 'antd'
import { WeaTools, WeaRichText, WeaLocaleProvider, WeaDialog, WeaInputSearch} from 'ecCom'
const getLabel = WeaLocaleProvider.getLabel;
export default class Content extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        searchValue:"",
        phrasesDatas: [],//有条件筛选的短语
        phrasesDatas_back: [],//备用的短语
    };
}


componentDidMount() {
  this.loadPhrasesDatas();
}



 loadPhrasesDatas() {
      WeaTools.callApi('/api/workflow/reqform/getPhrases', 'POST').then(data => {
          let phrasesDatas = data.phrasesDatas;
          if (this.state.searchValue) {
              phrasesDatas = phrasesDatas_back.filter(item => (item.short.includes(this.state.searchValue) || item.desc.includes(this.state.searchValue)));
          }
          this.setState({ phrasesDatas: data.phrasesDatas, phrasesDatas_back: data.phrasesDatas, searchValue: "" });
      });
    }


	/**
	 * 删除
	 */
  doDel = (params = {}) => {
    WeaTools.callApi('/api/workflow/userDefaultSetting/doDel', 'POST', params).then(res => {
        res.msg && message.success(res.msg);
        if (res.success == 1) {
            let phrasesDatas = this.state.phrasesDatas.filter(item => item.id != params.ids);
            this.setState({ phrasesDatas });
            this.loadPhrasesDatas()
        }
    })
}

  //保存流程短语
  savePhrases() {
    const phrasesText = jQuery(".wf-phrases .wf-phrases-input").val();
    const {phrasesDatas} = this.state;
    if (realLength(phrasesText) > 30) {
        message.warning(getLabel(385870, '文本长度不能超过30(1个中文字符等于3个长度)'), 3);
    } else if (trim(phrasesText).length == 0) {
        this.setState({editPhrases: false});
    } else {
        phrasesDatas.push({short: phrasesText, desc: phrasesText});
        this.setState({editPhrases: false, phrasesDatas});
        WeaTools.callApi('/api/workflow/reqform/addWfPhrase', 'POST', {
            phraseShort: phrasesText,
            phraseDesc: phrasesText
        });
    }
}
	/**
	 * 控制显示和隐藏
	 */
  doChangeStatus = (params = {}) => {
    WeaTools.callApi('/api/workflow/userDefaultSetting/doChangeStatus', 'POST', params).then(res => {
        const { success = "", msg = "" } = res;
        msg && message.success(msg);
        if (success == 1) {
            let phrasesDatas = this.state.phrasesDatas.filter(item => item.id != params.id);
            this.setState({ phrasesDatas });
            this.loadPhrasesDatas()
        }
    })
}


  render() {
    const { userPhraseEditStore,changeEditPhrases  } = this.props;
    
    return (
        <div className="wf-phrases">
            <div className="wf-phrases-search-input">
                <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@eqmx5l`}
                    value = {this.state.searchValue}
                    style={{ height: "30px", width: "100%", }}
                    onChange={(val) => {
                        this.setState({ searchValue:val})
                        if (val) {
                            let phrasesDatas = this.state.phrasesDatas_back.filter(item => (item.short.includes(val) || item.desc.includes(val)));
                            this.setState({ phrasesDatas });
                        } else {
                            this.setState({ phrasesDatas: this.state.phrasesDatas_back });
                        }
                    }}
                />
            </div>
            <div className="wf-phrases-list">
                {this.state.phrasesDatas && this.state.phrasesDatas.map((val, index) =>
                    val.status==1 && <div className="wf-phrases-item" onClick={() => {this.props.clickPhrases(index, this.state.phrasesDatas)}}>
                        <span title={val.short}>{val.short !="" && <div className="wf-phrases-item-content">{val.short}</div> }</span>
                        <div className="wf-phrase-edit-part">
                            {val.right == 1 && <i className="icon-coms-delete wfphrase-edit-icon font14" title={getLabel(91, "删除")} onClick={(e) => {
                                Modal.confirm({
                                    content: getLabel(84051, "确定要删除") + `"` + val.short + `"` + getLabel(528468, "批示语吗？"),
                                    onOk: () => {
                                        //传入id删除
                                        this.doDel({ ids: val.id });
                                        this.setState({ showPhrases: false })
                                    },
                                    onCancel: () => {
                                        this.setState({ showPhrases: true })
                                    },
                                    zIndex: 1071,
                                })
                                e.stopPropagation();
                            }} />}
                            {val.right == 1 && <i className="icon-coms-edit wfphrase-edit-icon font14" title={getLabel(93, "编辑")} onClick={(e) => {
                                e.stopPropagation();
                                userPhraseEditStore.onEdit(val.id);//让后端返出id，item.id
                                this.props.changeEditPhrases({ editPhrases: true })
                            }} />}
                            <i className="icon-coms02-hide wfphrase-edit-icon font17" title={getLabel(16636, "隐藏")} onClick={(e) => { this.doChangeStatus({id:val.id,groupid:val.groupid,status:val.status}); e.stopPropagation(); }} />
                        </div>
                    </div>
                )
                }
            </div>
            <div style={{ position: "relative" }} className="wf-phrases-add-part">
                {
                    // editPhrases
                    // ? <div className="wf-phrases-edit">
                    //     <input type="text" className="wf-phrases-input"/>
                    //     <Button type="primary" onClick={this.savePhrases}>{getLabel(83446,'确定')}</Button>
                    // </div>
                    // :
                    <div className="wf-phrases-add">
                        <i title={getLabel(611, "添加")} onClick={v => {
                        userPhraseEditStore.onEdit("", this.props.remark);
                        changeEditPhrases(true);
                    }}  className="icon-coms-Add-to-o"/>
                    </div>
                }
            </div>
        </div>
    
    )
  }
}